// AJAJXS LESS 样式库 基础库，该文件应该通过 @import 'common_style'; 被引入。

/*
-------------------------
常见样式类
-------------------------
*/

.centerBody(@defaultWidth: 1300px) {
    max-width: @defaultWidth;
    margin: 0 auto;
    width: 100%;
    height: 100%;
}

// 水平线
.ajaxjs-hr {
    margin: 1% 0;
    border: 0;
    border-top: 1px solid #eee;
    border-bottom: 1px solid #fff;
}

// 快速制作1px 表格边框，为需要设置的table元素加上border的class即可
.ajaxjs-borderTable {
    border: 1px gray solid;
    border-collapse: collapse;
    border-spacing: 0;
    th {
        background-color: #efefef;
    }
    td,
    th {
        border: 1px gray solid;
        line-height: 160%;
        height: 120%;
        padding: 6px;
    }
}

.ajaxjs-niceTable {
    border-spacing: 0;
    border: solid #ccc 1px;
    border-radius: 6px;
    box-shadow: 0 1px 1px #ccc;
    td, th {
        border-left: 1px solid #ccc;
        border-top: 1px solid #ccc;
        padding: 10px;
        text-align: center;
    }
    tr {
        .transition(background-color 400ms ease-out);
        &:hover {
            background-color: #fbf8e9!important;
        }
        &:last-child {
            td:first-child {
                border-radius: 0 0 0 6px;
            }
            td:last-child {
            border-radius: 0 0 6px 0;
            }
        }
    }
    th {
        background-color: #dce9f9;
        background-image: -webkit-gradient(linear, left top, left bottom, from(#ebf3fc), to(#dce9f9));
        .gradient(top, #ebf3fc, #dce9f9);
        text-align: center;
        border-top: none;
        box-shadow: 0 1px 0 rgba(255, 255, 255, .8) inset;
        text-shadow: 0 1px 0 rgba(255, 255, 255, .5);
        &:first-child {
            border-radius: 6px 0 0 0;
        }
        &:last-child {
            border-radius: 0 6px 0 0;
        }
        &:only-child {
            border-radius: 6px 6px 0 0;
        }
    }
   

    td:first-child, th:first-child {
        border-left: none;
    }
    tbody {
        tr:nth-child(even) {
            background: #f5f5f5;
            box-shadow: 0 1px 0 rgba(255, 255, 255, .8) inset;
        }
    }
    tfoot td {
        text-align: right;
    }
}




/*
-------------------------
各类函数
-------------------------
*/

.transition(@t) {
    -webkit-transition: @t;
    -moz-transition: @t;
    -ms-transition: @t;
    -o-transition: @t;
    transition: @t;
}

.transition_withTransform(@t) {
    -webkit-transition: -webkit-transform @t;
    -moz-transition: -moz-transform @t;
    -ms-transition: -moz-transform @t;
    -o-transition: -o-transform @t;
    transition: transform @t;
}

.transform(@t) {
    -webkit-transform: @t;
    -moz-transform: @t;
    -ms-transform: @t;
    -o-transform: @t;
    -transform: @t;
}

.heightFx() {
    .transition(300ms height ease-out);
}

.widthFx() {
    .transition(200ms width ease-out);
}

.leftFx() {
    .transition(200ms left linear);
}

// 解决使用CSS动画时闪烁的问题
// http://ued.taobao.com/blog/2012/01/chrome%E6%B8%B2%E6%9F%93transition%E6%97%B6%E9%A1%B5%E9%9D%A2%E9%97%AA%E5%8A%A8bug/
.fixTransitionFlash() {
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
}

// 解决高度塌陷的问题 – 清除浮动 或叫 闭合浮动
// http://www.iyunlu.com/view/css-xhtml/55.html
// http://www.zhangxinxu.com/wordpress/2010/01/css-float%E6%B5%AE%E5%8A%A8%E7%9A%84%E6%B7%B1%E5%85%A5%E7%A0%94%E7%A9%B6%E3%80%81%E8%AF%A6%E8%A7%A3%E5%8F%8A%E6%8B%93%E5%B1%95%E4%BA%8C/
// 强制换行
.forceBreak() {
    word-wrap: break-word;
    word-break: break-all;
}

.giveHeight() {
    overflow: hidden;
    zoom: 1;
}

// 透明度
.imgOpacityShow(@time : 300ms) {
    .transition(opacity @time ease-in);
}

// 旋转角度
.rotate(@ro: 30deg) {
    .transform(rotate(@ro));
}

// 渐变
.gradient(@direction, @startColor, @endColor) {
    background-image: -webkit-linear-gradient(@direction, @startColor, @endColor);
    background-image: -moz-linear-gradient(@direction, @startColor, @endColor);
    background-image: -ms-linear-gradient(@direction, @startColor, @endColor);
    background-image: -o-linear-gradient(@direction, @startColor, @endColor);
    background-image: linear-gradient(@direction, @startColor, @endColor);
}

// 渐变
.gradient(@direction, @startColor, @midColor, @endColor) {
    // android 2.2 css
    // background-image: -webkit-gradient(linear, center top, center bottom, from(@startColor), to(@endColor));
    // background-image: -webkit-gradient(linear, left top, right top, color-stop(0, rgba(255, 255, 255, 0.2)), color-stop(1, #9ba1a6));
    // for IE
    // filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=@startColor, endColorstr=@endColor);
    background-image: -webkit-linear-gradient(@direction, @startColor, @midColor, @endColor);
    background-image: -moz-linear-gradient(@direction, @startColor, @midColor, @endColor);
    background-image: -ms-linear-gradient(@direction, @startColor, @midColor, @endColor);
    background-image: -o-linear-gradient(@direction, @startColor, @midColor, @endColor);
    background-image: linear-gradient(@direction, @startColor, @midColor, @endColor);
}

@keyframes fade-in {
    0% {
        opacity: 0;
    }
    /*初始状态 透明度为0*/
    40% {
        opacity: 0;
    }
    /*过渡状态 透明度为0*/
    100% {
        opacity: 1;
    }
    /*结束状态 透明度为1*/
}

@-webkit-keyframes fade-in {
    /*针对webkit内核*/
    0% {
        opacity: 0;
    }
    40% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@keyframes fade-out {
    0% {
        opacity: 1;
    }
    /*初始状态 透明度为0*/
    40% {
        opacity: 1;
    }
    /*过渡状态 透明度为0*/
    100% {
        opacity: 0;
    }
    /*结束状态 透明度为1*/
}

@-webkit-keyframes fade-out {
    /*针对webkit内核*/
    0% {
        opacity: 1;
    }
    40% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

.fadeIn(@duration) {
    animation: fade-in;
    /*动画名称*/
    animation-duration: @duration;
    /*动画持续时间*/
    -webkit-animation: fade-in @duration;
    /*针对webkit内核*/
}

/* 文字段落 */
.ajaxjs-text-p {
	color: #333;
	line-height: 160%;
	margin: 15px 0;
	font-size: 1rem;
	letter-spacing: 1px;
	text-align: justify;
}

/* 文字引用 */
.ajaxjs-text-quotation {
	color: gray;
}

.ajaxjs-text-quotation:before {
	content: '‟';
	font-size: 3rem;
}

.ajaxjs-text-quotation:after {
	content: '”';
	font-size: 3rem;
	font-family: "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
}
  
/*
-------------------------
常见表单样式类
-------------------------
*/

// 禁止控件
.ajaxjs-disable {
    cursor: not-allowed;
    opacity: .65;
    box-shadow: none;
    background-image: none;
    -webkit-user-select: none; // 不可选择文本
    -moz-user-select: none;
    user-select: none;
}


/*可以用来给文字添加描边*/
// -webkit-text-stroke: 1px rgba(255,255,255,0.5);
.ajaxjs-btn,
.ajaxjs-btn-1 {
	height: 26px;
    font-size: .9rem;
    line-height:10px; // for input[submit]
    padding: .4em 2.3em;
    margin: 10px;
    color: #333;
    letter-spacing: .3em;
    border-radius: 4px;
    border: 1px solid #ccc;
    border-bottom-color: #B4B4B4;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8);
    background-color: lightgray;
    background-repeat: repeat-x;
    transition: background-image 0.5s linear 1s;
    .gradient(top, rgba(255, 255, 255, 1) 0%, rgba(239, 239, 239, 1) 60%, rgba(225, 223, 226, 1) 100%);
    img{
    	vertical-align: middle;
    }
    &:hover {
        color: black;
        border-color: lighten(black, 65%);
    }
    &:active {
        box-shadow: inset 0 3px 5px rgba(0, 0, 0, .2);
        border-color: lighten(black, 55%);
    }
    &:focus {
        border-color: lighten(black, 60%);
    }
    &:hover {
        background-position: 0px -10px;
    }
}

.ajaxjs-btn-1 {
    background-position: 0px -15px;
    transition: all 200ms linear 300ms;
    &:hover {
        background-position: 0px -12px;
    }
}

.ajaxjs-inputField {
    height: 26px;
    padding: 0px 4px;
    box-shadow: 1px 2px 3px lighten(#999, 30) inset;
    border-radius: 3px;
    border: 1px solid #abadb3;
    box-sizing: border-box;
    vertical-align: middle;
    color: #333;
    font-size: .9rem;
    letter-spacing: 1px;
    transition: border-color ease-in-out 200ms;
    &:hover,
    &:focus {
        border-color: lighten(black, 45);
    }
}

.ajaxjs-select {
    height: 26px;
    padding: 1px 4px;
    box-shadow: 1px 2px 3px #e5e5e5 inset;
    border-radius: 2px;
    border: 1px solid #abadb3;
    font-size: .9rem;
    -moz-appearance: none;
    -webkit-appearance: none;
    /*for chrome*/
    background: url("") no-repeat right;
    background-color: white;
    &:hover,
    &:focus {
        border-color: lighten(black, 45);
    }
}

// 多选列表框的边框
.ajaxjs-select[multiple] {
    border: 1px solid #abadb3;
    padding: 2px;
    &:hover,
    &:focus {
        border-color: lighten(black, 45);
    }
}


// 列表
.ajaxjs-ul-list(@columns) {
    clear:both;
	overflow: hidden;

    & when (@columns =3) {
        padding-left:1%;
    }

    li {
        float: left;
        overflow: hidden;
        box-sizing: border-box;
        list-style: none;

        & when (@columns =2) {
            width:48%;
            &:nth-of-type(odd){ // 用 css 完成 实在不行，可以用js计算完成
                margin-left:1.3%; 
                margin-right:1.3%; 
            } 
            &:nth-of-type(even){ 
                margin-right:1.4%; 
            } 
        }

        & when (@columns =3) {
            width: 33.3%;
            padding-right :1%;
        }
        & when (@columns =4) {
            width: 25%;
            padding-right :1%;
        }
    }
}

// 图片容器
.ajaxjs-imgHolder{
	position: relative;
	overflow: hidden;
	min-height: 70px; // 最小高度，不限最大高度，由图片决定
	// 背景图
	background: no-repeat center top url('');
	background-size: 110% 80%;

	img{
		width:100%;
		height:100%;
        vertical-align: top;

	}
    h3,  h4 {
        position: absolute;
        bottom: 0;
        left: 0;
        height: 25px;
        background-color: rgba(0, 0, 0, 0.3);
        padding: 1%;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        width: 100%;
        color:white;
    }
    .m_checkbox {
        width: 20px;
        height: 20px;
        border: 5px solid rgba(0, 255, 0, .5);
        border-right-width: 2px;
        border-bottom-width: 2px;
        position: absolute;
        top: 5px;
        right: 5px;
    }
    .m_selected {
        position: absolute;
        top: 5px;
        right: 5px;
        width: 25px;
        height: 25px;
        background: no-repeat url();
        background-size: 100%;
    }
}

